<template>
  <div class="chat-container">
    <!-- 导航栏 -->
    <van-nav-bar
      class="app-nav-bar"
      title="小智同学"
      left-arrow
      @click-left="$router.back()"
      fixed
    />
    <!-- /导航栏 -->

    <!-- 消息列表 -->
    <!-- <div class="message-list" ref="message-list">
      <div
        class="message-item"
        :class="{ reverse: item.userId === user.user_id }"
        v-for="(item, index) in messages"
        :key="index"
      >
        <van-image
          class="avatar"
          round
          fit="cover"
          :src="item.photo"
        />
        <div class="msg-wrap" style="flex: 1;">
          <div class="title">{{ item.msg }}</div>
        </div>
      </div>
    </div> -->
    <van-cell-group class="message-list">
      <van-cell title="单元格"/>
      <van-cell title="单元格"/>
      <van-cell title="单元格"/>
      <van-cell title="单元格"/>
      <van-cell title="单元格"/>
      <van-cell title="单元格"/>
      <van-cell title="单元格"/>
      <van-cell title="单元格"/>
      <van-cell title="单元格"/>
      <van-cell title="单元格"/>
      <van-cell title="单元格"/>
      <van-cell title="单元格"/>
      <van-cell title="单元格"/>
      <van-cell title="单元格"/>
      <van-cell title="单元格"/>
      <van-cell title="单元格"/>
      <van-cell title="单元格"/>
      <van-cell title="单元格"/>
      <van-cell title="单元格"/>
      <van-cell title="单元格"/>
      <van-cell title="单元格"/>
      <van-cell title="单元格"/>
    </van-cell-group>
    <!-- /消息列表 -->

    <!-- 发送消息 -->
    <van-cell-group class="send-message-wrap">
      <van-field
        v-model="message"
        placeholder="请输入消息"
        :border="false"
        center
        clearable
      >
        <van-button
          slot="button"
          size="small"
          type="primary"
         
        >发送</van-button>
      </van-field>
    </van-cell-group>
    <!-- /发送消息 -->
  </div>
</template>

<script>
// import io from 'socket.io-client'

//建立连接
// const socket = io("http://ttapi.research.itcast.cn");

export default {
  name: 'ChatPage',
  data () {
    return {
      message: '',
    }
  },

  computed: {},

  watch: {},

  created () {
    // socket.on('connect',function () {
    //   console.log('连接建立成功了');
    // })
    // // socket.on('event',function () {
    // //   console.log('连接建立成功了');
    // // })

    // //断开连接
    // socket.on('disconnect',function () {
    //   console.log('断开连接了');
    // })

    //发送消息
    //socket.emit('消息类型',消息内容)
    //socket.on('消息类型',function(data){data消息})
  },

  mounted () {},

  methods: {}
}
</script>

<style scoped lang="less">
.message-list {
  position: fixed;
  left: 0;
  right: 0;
  top: 46px;
  bottom: 44px;
  overflow-y: auto;
}
.send-message-wrap {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  padding: 0 14px;
  align-items: center;
}
</style>